import React, { Component } from 'react';
import ChildB from './components/ChildB';
import Modal from './components/Modal';
class App extends Component {
  // visible 控制是否显示弹框
  state = { visible:false } 
  // 设置visible为false的方法
  onclose=()=>this.setState({visible:false})
  render() { 
    return (
      <div>

        <h2>弹框组件</h2>
        {/* 单击按钮设置visible为true */}
        <button onClick={()=>this.setState({visible:true})}>显示弹框</button>
        {/* 使用Modal弹框 传入属性 onclose关闭弹框方法  visible控制弹框是否显示 title弹框的标题 */}
        <Modal onclose={this.onclose} visible={this.state.visible} title='我爱中国'>
            <p>弹框内容，插槽形式</p>
        </Modal>
        <h2>组件的插槽</h2>
        <ChildB>
          <p>学好react月薪过W</p>
          <p>学好前端不用掉头发</p>
        </ChildB>
      </div>
    );
  }
}
 
export default App;